<template>
  <div class="course-details">
    <van-nav-bar :title="title" left-arrow @click-left="onClickLeft" fixed />
    <van-tabs scrollspy sticky>
      <van-tab title="课程">
        <div class="video-box">
          <video-player
            class="video-player vjs-custom-skin"
            ref="videoPlayer"
            name="videoPlayer"
            id="video"
            :playsinline="true"
            :options="playerOptions"
            @play="onPlayerPlay($event)"
            @pause="onPlayerPause($event)"
            @ended="onPlayerEnded($event)"
            @waiting="onPlayerWaiting($event)"
            @timeupdate="onPlayerTimeupdate($event)"
            @statechanged="playerStateChanged($event)"
            @canplaythrough="onPlayerCanplaythrough($event)"
            @ready="playerReadied"
          ></video-player>
          <span class="video-text">已有93411人上过</span>
        </div>
        <div class="cd-box">
          <div class="cd-text"><span>全身燃脂</span></div>
          <div class="cd-text"><button>适合新手</button></div>
          <div class="cd-text-box">
            <div class="cd-text-box-inner">
              <span class="cd-text-up">时长</span><span class="cd-text-down">30<span class="cd-text-min">Min</span></span>
            </div>
            <div class="cd-text-box-inner"><span class="cd-text-up">作用</span><span class="cd-text-down">减脂</span></div>
            <div class="cd-text-box-inner"><span class="cd-text-up">难度</span><span class="cd-text-down">-</span></div>
            <div class="cd-text-box-inner">
              <span class="cd-text-up">卡路里</span><span class="cd-text-down">450<span class="cd-text-min">Kcal</span></span>
            </div>
          </div>
        </div>
        <div class="coach-details">
          <div class="cod-title">
            <div class="cod-title-portrait"><van-image round cover :src="require('../../assets/coach/哲里.jpg')" /></div>
            <div class="cod-title-text">
              <span class="cod-title-text-up">哲里</span>
              <span class="cod-title-text-down">专业值得信赖</span>
            </div>
          </div>
          <div class="cod-content"><span class="cod-content-left">时间</span><span class="cod-content-right">明天 星期二 18:00-18:30</span></div>
          <div class="cod-content"><span class="cod-content-left">地点</span><span class="cod-content-right">龙华大唐时代店</span></div>
          <div class="cod-content"><span class="cod-content-left">教室</span><span class="cod-content-right">操房</span></div>
          <div class="cod-content"><span class="cod-content-left">用户</span><span class="cod-content-right">已约8人</span></div>
        </div>
      </van-tab>
      <van-tab title="评价">
        <div class="cd-appraise">
          <div class="cda-title"><span class="cda-title-left">精选评价</span><span class="cda-title-right">全部5条＞</span></div>
          <div class="cda-details">
            <div class="cdad-inner">
              <div class="cdad-left">
                <div class="cdad-portrait"><van-image round width="1.1rem" height="1.1rem" fit="cover" :src="require('../../assets/user-portraits/16443661776708942.136466730914.jpg')" /></div>
                <div class="cdad-inner-right">
                  <span class="name">Zoe</span>
                  <div class="cdadir-down">
                    <div class="star">
                      <van-image :src="require('../../assets/icon_star_active.png')" />
                      <van-image :src="require('../../assets/icon_star_active.png')" />
                      <van-image :src="require('../../assets/icon_star_active.png')" />
                      <van-image :src="require('../../assets/icon_star_active.png')" />
                      <van-image :src="require('../../assets/icon_star_active.png')" />
                      <span class="cdadird-down">5.0</span>
                    </div>
                  </div>
                </div>
              </div>
              <div class="cdad-date">2022-02-23</div>
            </div>
            <span class="cdad-text">短短三十分钟,燃脂效果杠杠滴,给哲里教练点赞</span>
          </div>
          <div class="cda-details">
            <div class="cdad-inner">
              <div class="cdad-left">
                <div class="cdad-portrait"><van-image round width="1.1rem" height="1.1rem" fit="cover" :src="require('../../assets/user-portraits/132.jpg')" /></div>
                <div class="cdad-inner-right">
                  <span class="name">LG</span>
                  <div class="cdadir-down">
                    <div class="star">
                      <van-image :src="require('../../assets/icon_star_active.png')" />
                      <van-image :src="require('../../assets/icon_star_active.png')" />
                      <van-image :src="require('../../assets/icon_star_active.png')" />
                      <van-image :src="require('../../assets/icon_star_active.png')" />
                      <van-image :src="require('../../assets/icon_star_active.png')" />
                      <span class="cdadird-down">5.0</span>
                    </div>
                  </div>
                </div>
              </div>
              <div class="cdad-date">2022-02-17</div>
            </div>
            <span class="cdad-text"> </span>
          </div>
          <div class="cda-details">
            <div class="cdad-inner">
              <div class="cdad-left">
                <div class="cdad-portrait"><van-image round width="1.1rem" height="1.1rem" fit="cover" :src="require('../../assets/user-portraits/default_avatar.jpeg')" /></div>
                <div class="cdad-inner-right">
                  <span class="name">匿名用户</span>
                  <div class="cdadir-down">
                    <div class="star">
                      <van-image :src="require('../../assets/icon_star_active.png')" />
                      <van-image :src="require('../../assets/icon_star_active.png')" />
                      <van-image :src="require('../../assets/icon_star_active.png')" />
                      <van-image :src="require('../../assets/icon_star_active.png')" />
                      <van-image :src="require('../../assets/icon_star_active.png')" />
                      <span class="cdadird-down">5.0</span>
                    </div>
                  </div>
                </div>
              </div>
              <div class="cdad-date">2022-01-08</div>
            </div>
            <span class="cdad-text"> </span>
          </div>
          <div class="show-all">
            <button>查看全部<van-icon name="arrow" /></button>
          </div>
        </div>
      </van-tab>
      <van-tab title="详情">
        <div class="cdcd">
          <div class="cdcd-title">课程介绍</div>
          <div class="cdcd-content" :style="{ backgroundImage: `linear-gradient(to top, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)),url(${url})` }"></div>
          <div class="cdcd-button">
            <button @click="cDshowButton">
              展开全部 <span class="button-span"><van-icon name="arrow-down" /></span>
            </button>
          </div>
        </div>
      </van-tab>
      <van-tab title="规则">
        <div class="class-process">
          <div class="cp-title">上课流程</div>
          <div class="cp-icon">
            <div class="cp-icon-box">
              <van-icon name="completed" />
              <div class="cp-icon-text">选课</div>
            </div>
            <van-icon name="share" />
            <div class="cp-icon-box">
              <van-icon name="clock-o" />
              <div class="cp-icon-text">预约</div>
            </div>
            <van-icon name="share" />
            <div class="cp-icon-box">
              <van-icon name="scan" />
              <div class="cp-icon-text">签到</div>
            </div>
            <van-icon name="share" />
            <div class="cp-icon-box">
              <van-icon name="comment-o" />
              <div class="cp-icon-text">评价</div>
            </div>
          </div>
        </div>
        <div class="book-rules">
          <div class="br-title">约课规则</div>
          <div class="br-one-five">
            <div class="br-u-title">1.课表发布</div>
            <div class="br-u-content">每周五22:00发布下周一至周日课表</div>
            <div class="br-u-title">2.预约</div>
            <div class="br-u-content">每天11:00开放10天后的课程预约。</div>
            <div class="br-u-title">3.取消预约</div>
            <div class="br-u-content">通过预约通道成功预订的课程：<br />开课前大于2小时可免责取消，不满2小时无法取消。<br />通过购买通道成功预订的课程： <br />· 开课前2小时内无法取消课程。<br />· 开课前>=2小时取消课程,取消可全额退款（7日内原支付通道返回）。</div>
            <div class="br-u-title">4.官方取消</div>
            <div class="br-u-content">开课前2小时预约会员≦1人，后台系统可能会自动取消课程，请大家知悉，谢谢理解和配合。 <br />开课后到场人数≦3人，在征得您同意的情况下，教练可现场取消课程。</div>
            <div class="br-u-title">5.排队</div>
            <div class="br-u-content">
              排队成功：<br />
              系统将会根据排队先后顺序通知排队成功（通知方式：微信、短信或app消息）。<br />
              排队取消：<br />
              如已预约有时间冲突的课程，排队将自动取消。如同时排队多节时间重复课程，其中一节排队成功，其他课程自动取消排队。<br />
              排队失败：<br />
              若课程在不可取消预约时间内还未排队成功，将自动退款（包含优惠券）。
            </div>
          </div>
          <div class="br-six-nine" style="display: none">
            <div class="br-u-title">6.签到</div>
            <div class="br-u-content">
              课程开始前30分钟或课程结束后15分钟可进行签到。<br />
              如遇网络故障门店维护等原因无法签到，请及时联系店长开启特殊补签流程。
            </div>
            <div class="br-u-title">7.旷课</div>
            <div class="br-u-content">
              因个人原因未签到，记为旷课一次。<br />
              如果一周旷课≥2节，下周限制只能预约1节课程，下下周恢复正常。
            </div>
            <div class="br-u-title">8.迟到</div>
            <div class="br-u-content">
              课程迟到5分钟后不允许进入操房，特殊情况需要和工作人员说明情况，根据现场实际情况酌情安排。<br />
              课程开始15分钟后为了您的人身安全任何原因都不允许进入操房参加课程。
            </div>
            <div class="br-u-title">9.其他</div>
            <div class="br-u-content">
              团课采取预约制，未预约课程会员请勿进入操房，不允许占座；<br />
              课程结束后请整理好自已使用的道具，带好随身物品离场。<br />
              课程结束后需要继续上课的会员请离开操房再次签到，请勿放任何物品占位。
            </div>
          </div>
          <div class="br-button">
            <button @click="bRshowButton">
              展开全部 <span class="button-span"><van-icon name="arrow-down" /></span>
            </button>
          </div>
        </div>
      </van-tab>
    </van-tabs>
    <div class="buy-course">
      <button><span class="bc-discount">购买课程 ¥ 39</span><br /><span class="bc-original">原价 ¥ 59</span></button>
    </div>
  </div>
</template>

<script>
import { Toast } from 'vant'
import { videoPlayer } from 'vue-video-player'
import 'video.js/dist/video-js.css'
import 'vue-video-player/src/custom-theme.css'

export default {
  name: 'CouseDetails',
  components: {
    videoPlayer
  },
  data() {
    return {
      url: require('../../assets/coursedetails/classImgList.jpg'),
      title: '全身燃脂',
      playTime: '',
      current: '',
      playerOptions: {
        playbackRates: [0.5, 1.0, 1.5, 2.0], // 可选的播放速度
        autoplay: false, // 如果为true,浏览器准备好时开始回放。
        muted: false, // 默认情况下将会消除任何音频。
        loop: false, // 是否视频一结束就重新开始。
        preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
        language: 'zh-CN',
        aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
        fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
        sources: [
          {
            type: 'video/mp4', // 类型
            src: 'https://img.leoao.com/compress/o_1freccte4tipq3v152h14atnbda.mp4?vediolim' // url地址
          }
        ],
        poster: require('../../assets/coursedetails/classVideoCoverImg.jpg'), // 封面地址
        notSupportedMessage: '此视频暂无法播放，请稍后再试', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
        controlBar: {
          timeDivider: true, // 当前时间和持续时间的分隔符
          durationDisplay: true, // 显示持续时间
          remainingTimeDisplay: false, // 是否显示剩余时间功能
          fullscreenToggle: true // 是否显示全屏按钮
        }
      }
    }
  },
  methods: {
    cDshowButton() {
      let cdcdc = document.querySelector('.cdcd-content')
      let cdcdb = document.querySelector('.cdcd-button')
      let url = this.url
      cdcdc.style.height = '37.06667rem'
      cdcdc.style.backgroundImage = `url(${url})`
      cdcdc.style. backgroundSize ='contain'
      cdcdb.style.display = 'none'
    },
    bRshowButton() {
      let brsn = document.querySelector('.br-six-nine')
      let brb = document.querySelector('.br-button')
      brsn.style.display = 'block'
      brb.style.display = 'none'
    },
    onClickLeft() {
      this.$router.go(-1)
    },
    // 播放回调
    onPlayerPlay(player) {
      console.log('player play!', player)
    },
    // 暂停回调
    onPlayerPause(player) {
      console.log('player pause!', player)
    },
    // 视频播完回调
    onPlayerEnded($event) {
      console.log(player)
    },
    // DOM元素上的readyState更改导致播放停止
    onPlayerWaiting(player) {
      let time = localStorage.getItem('cacheTime')
      if (player.cache_.currentTime - Number(time) > 0.1) {
        this.current = Number(time)
        this.playerReadied(player)
      } else {
        this.current = player.cache_.currentTime
      }
    },
    // 已开始播放回调
    onPlayerPlaying($event) {
      // console.log(player)
    },
    // 当播放器在当前播放位置下载数据时触发
    onPlayerLoadeddata($event) {
      // console.log(player)
    },
    //  当前播放位置发生变化时触发。
    onPlayerTimeupdate(player) {
      this.playTime = player.cache_.currentTime
      let playTime = player.cache_.currentTime
      setTimeout(function () {
        localStorage.setItem('cacheTime', playTime)
      }, 500)
      let time = localStorage.getItem('cacheTime')
      if (player.cache_.currentTime - Number(time) > 2) {
        this.current = Number(time)
        this.playerReadied(player)
      } else {
        this.current = player.cache_.currentTime
      }
    },
    //媒体的readyState为HAVE_FUTURE_DATA或更高
    onPlayerCanplay(player) {
      // console.log('player Canplay!', player)
    },
    //媒体的readyState为HAVE_ENOUGH_DATA或更高。这意味着可以在不缓冲的情况下播放整个媒体文件。
    onPlayerCanplaythrough(player) {
      // console.log('player Canplaythrough!', player)
    },
    //播放状态改变回调
    playerStateChanged(playerCurrentState) {
      // console.log('player current update state', playerCurrentState)
    },
    //将侦听器绑定到组件的就绪状态。与事件监听器的不同之处在于，如果ready事件已经发生，它将立即触发该函数。。
    playerReadied(player) {
      // console.log('example player 1 readied', player);
      player.currentTime(this.current)
    }
  },
  beforeRouteLeave(to, from, next) {
    this.$refs.videoPlayer.player.pause()
    let cdcdc = document.querySelector('.cdcd-content')
    let cdcdb = document.querySelector('.cdcd-button')
    let url = this.url
    cdcdc.style.height = '5.3333rem'
    cdcdc.style.backgroundImage = `linear-gradient(to top, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)),url(${url})`
    cdcdc.style. backgroundSize ='cover'
    cdcdb.style.display = 'flex'
    let brsn = document.querySelector('.br-six-nine')
    let brb = document.querySelector('.br-button')
    brsn.style.display = 'none'
    brb.style.display = 'flex'
    next()
  },
  mounted() {}
}
</script>

<style lang="less" scoped>
/deep/ .van-icon-arrow-left:before {
  color: #8c8c8c;
  transform: scale(1.2);
}
.video-box {
  position: relative;
  .video-text {
    position: absolute;
    top: 160px;
    left: 16px;
    font-size: 10px;
    color: white;
  }
}
/deep/.video-js .vjs-big-play-button {
  border: none !important;
}
.course-details {
  padding-bottom: 80px;
  /deep/.van-sticky--fixed {
    top: 42px;
  }
  .cd-box {
    background-color: white;
    padding: 18px 0px;
    .cd-text {
      font-size: 22px;
      margin-left: 12px;
      color: #333333;
      > button {
        border: none;
        border-radius: 15px;
        padding: 8px 12px;
        font-size: 10px;
        color: #a7aab6;
        margin: 14px auto;
      }
    }
    .cd-text-box {
      display: flex;
      justify-content: space-around;
      align-items: center;
      .cd-text-box-inner {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        height: 80px;
        .cd-text-up {
          font-size: 15px;
          color: #a7aab6;
        }
        .cd-text-down {
          font-size: 20px;
          font-family: 'Times New Roman';
          color: #333333;
          .cd-text-min {
            font-size: 10px;
            margin-left: 4px;
          }
        }
      }
    }
  }
  .coach-details {
    background-color: #fff;
    margin: 14px auto;
    width: 344px;
    border-radius: 10px;
    .cod-title {
      display: flex;
      padding: 14px;
      .cod-title-portrait {
        width: 44px;
        height: 44px;
      }
      .cod-title-text {
        display: flex;
        flex-direction: column;
        margin-left: 14px;
        .cod-title-text-up {
          font-size: 16px;
        }
        .cod-title-text-down {
          font-size: 14px;
          color: #a7aab6;
        }
      }
    }
    .cod-content {
      font-size: 16px;
      padding: 0px 0px 14px 14px;
      .cod-content-left {
        color: #333333;
        margin-right: 14px;
      }
      .cod-content-right {
        color: #666666;
      }
    }
  }
  .cd-appraise {
    background-color: #fff;
    margin: 14px auto;
    width: 344px;
    border-radius: 10px;
    .cda-title {
      display: flex;
      justify-content: space-between;
      padding: 14px;
      color: #534e63;
      .cda-title-left {
        font-size: 16px;
      }
      .cda-title-right {
        font-size: 14px;
      }
    }
    .cda-details {
      padding: 14px 14px 28px;
      .cdad-inner {
        display: flex;
        justify-content: space-between;
        .cdad-left {
          display: flex;
          align-items: center;
          .cdad-portrait {
            width: 44px;
            height: 44px;
          }
          .cdad-inner-right {
            font-size: 12px;
            font-family: 'Times New Roman';
            color: #534e63;
            margin-left: 4px;
            .cdadir-down {
              .star {
                display: flex;
                justify-content: space-between;
                width: 100px;
                height: 14px;
              }
            }
            .cdadird-down {
              font-family: Arial;
              margin-left: 6px;
            }
          }
        }
        .cdad-date {
          font-size: 12px;
          font-family: Arial;
          color: #534e63;
        }
      }
      .cdad-text {
        font-size: 14px;
        color: #534e63;
      }
    }
    .show-all {
      display: flex;
      justify-content: center;
      padding-bottom: 18px;
      > button {
        border-color: #ff6040;
        border-width: 1px;
        border-style: solid;
        color: #ff6040;
        font-size: 10px;
        border-radius: 20px;
        background-color: #fff;
        padding: 4px 6px 4px 8px;
      }
    }
  }
  .cdcd {
    background-color: #fff;
    margin: 14px auto;
    width: 344px;
    border-radius: 10px;
    padding-bottom: 18px;
    .cdcd-title {
      display: flex;
      justify-content: space-between;
      padding: 14px;
      color: #534e63;
      font-size: 16px;
    }
    .cdcd-content {
      margin: 0 auto;
      border-radius: 10px;
      width: 310px;
      height: 200px;
      // height: 1390px;
      background-size: cover;
      background-repeat: no-repeat;
    }
    .cdcd-button {
      display: flex;
      justify-content: center;
      padding: 18px 0;
      > button {
        border-color: #ff6040;
        border-width: 1px;
        border-style: solid;
        color: #ff6040;
        font-size: 10px;
        border-radius: 20px;
        background-color: #fff;
        padding: 4px 6px 4px 8px;
      }
    }
  }
  .class-process {
    background-color: #fff;
    margin: 14px auto;
    width: 344px;
    border-radius: 10px;
    padding-bottom: 14px;
    .cp-title {
      display: flex;
      justify-content: space-between;
      padding: 14px;
      color: #534e63;
      font-size: 16px;
    }
    .cp-icon {
      display: flex;
      justify-content: space-around;
      align-items: center;
      width: 300px;
      margin: 0 auto;
      /deep/ .van-icon {
        color: #534e63;
      }
      .cp-icon-box {
        .cp-icon-text {
          font-size: 12px;
          color: #a8abb7;
        }
      }
    }
  }
  .book-rules {
    background-color: #fff;
    margin: 14px auto;
    width: 344px;
    border-radius: 10px;
    padding-bottom: 14px;
    .br-title {
      display: flex;
      justify-content: space-between;
      padding: 14px;
      color: #534e63;
      font-size: 16px;
    }
    .br-six-nine,
    .br-one-five {
      padding: 14px 14px 0px 14px;
      .br-u-title {
        font-size: 16px;
        color: #534e63;
        padding-bottom: 10px;
      }
      .br-u-content {
        font-size: 14px;
        color: #a7aab6;
        padding-bottom: 20px;
      }
    }
    .br-button {
      display: flex;
      justify-content: center;
      > button {
        border-color: #ff6040;
        border-width: 1px;
        border-style: solid;
        color: #ff6040;
        font-size: 10px;
        border-radius: 20px;
        background-color: #fff;
        padding: 4px 6px 4px 8px;
      }
    }
  }
  .buy-course {
    position: fixed;
    width: 100%;
    bottom: 0;
    left: 0;
    background: #fff;
    padding: 14px 10px;
    > button {
      width: 94.5%;
      background-color: #ff6040;
      border: none;
      color: #fff;
      border-radius: 20px;
      font-size: 10px;
      font-family: 'Times New Roman';
      padding: 4px 6px;
      .bc-discount {
        font-size: 14px;
      }
      .bc-original {
        font-size: 10px;
        text-decoration: line-through;
      }
    }
  }
}
</style>
